<template>
	<view class="flex flex-direction bg-white" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block v-if="develop" slot="right">
				<text class="text-black cuIcon-news" style="font-size: 48rpx;" @click="share()"></text>
			</block>
		</cu-custom>
		<view class="flex flex-sub flex-direction padding-lr margin-top-sm">
			<view class="flex justify-start align-center">
				<view class="cu-avatar xl round" :style="{backgroundImage:'url('+ user.avatar +')'}"></view>
				<view style="margin-left: 32rpx;">
					<view>
						<text style="height: 64rpx; font-size: 40rpx; line-height: 64rpx; font-weight: bold; color: #333333;">
							{{user.username}}</text>
						<image :src="user.sex ? '../../static/mine/female.png' : '../../static/mine/male.png'" class="margin-left-sm" style="width: 32rpx; height: 32rpx;"></image>
					</view>
					<view @click="$Router.push({name: 'myEdit'}) ">
						<text class="text-black cuIcon-write" style="font-size: 24rpx;height: 32rpx;width: 32rpx;"></text>
						<text style="font-size: 24rpx;height: 32rpx;line-height: 32rpx; margin-left: 8rpx; font-weight: 400;">
							编辑资料</text>
					</view>
				</view>
			</view>
			<text class="margin-top" style="font-size: 28rpx; font-weight: 400; color: #999999;">{{user.description}}</text>
			<view class="flex justify-between margin-top-xl" style="font-size: 28rpx; font-weight: 400; color: #333333; line-height: 28rpx;">
				<text>身份认证</text>
				<text class="lg cuIcon-right text-xxl text-black"></text>
			</view>
			<view class="flex container margin-top flex-sub">
				<scroll-view :scroll-into-view="toview" scroll-x class="tab-bar" scroll-with-animation="true">
					<view @tap="onTabTap(index)" class="uni-tab" v-for="(tab,index) in tabList" :id="tab.id" :key="tab.id">
						<text :class="{'tab-cur': tabIndex == index}" class="uni-tab-item">{{tab.name}}</text>
					</view>
				</scroll-view>
				<swiper @change="onSwiperChange" :current="tabIndex" class="tab-box" :duration="300">
					<swiper-item class="swiper-item" v-for="(page,i) in tabList" :key="i">
						<scroll-view @scrolltolower="loadMoreData" scroll-y class="panel-scroll-box">
							<view v-for="(newsItem,index) in newsList" :key="index">
								<!-- 调用组件 -->
								<!-- <newsCell @cellTap="handleCellTap" :newsItem="newsItem"></newsCell> -->
								<booksCell @cellTap="handleCellTap" :books="newsItem"></booksCell>
							</view>
							<!-- 上拉加载组件 -->
							<loadMore :status="page.loadMoreStatus"></loadMore>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import newsCell from '../../components/mine/newsCell.vue';
	import loadMore from '../../components/mine/loadMore.vue';
	import booksCell from '../../components/mine/booksCell.vue';
	import memberApi from '../../api/memberApi.js';
	import mineApi from '../../api/mineApi.js';
	export default {
		components: {
			newsCell,
			loadMore,
			booksCell
		},
		data() {
			return {
				user: {},
				tabList: [],
				tabIndex: 0,
				toview: "", // scroll-view滚动到的视图id
				page: 1,
				size: 10,
				newsid: '',
				newsList: [],
				footerbottom: "0",
				top: 192, // 与顶部距离 单位upx
				navigateFlag: false,
			}
		},
		onLoad() {
			this.getTabsData();
			this.loadTabData();
		},
		onShow() {
			this.user.userid = this.$store.getters.userid;
			mineApi.getMemberInfo(this.user.userid).then(res=>{
				if (res.data) {
					this.user = res.data;
				}
			}).catch(err => {
				console.log(err);
			});
		},
		methods: {
			getTabsData() {
				uni.request({
					url: 'https://uniapp-toutiao.herokuapp.com/api/profiles/home_tab_list',
					success: (res => {
						res = res.data;
						// console.log(res.data.data)
						res.data.forEach(item => {
							item.loadMoreStatus = 0;
						})
						this.tabList = res.data;
					})
				})
			},
			loadTabData() {
				this.page = 1;
				// 切换选项卡 初始化状态
				if (this.tabList.length > 0) {
					this.tabList[this.tabIndex].loadMoreStatus = 0;
				}
			
				this.newsid = this.tabList.length > 0 ? this.tabList[this.tabIndex].newsid : "all";
				// console.log(this.newsid);
				// 数据请求
				
				this.newsList = [
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					},
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					},
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					},
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					},
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					},
					{
						name: "上瘾：让用户养成使用习惯的四大产品逻辑",
						description: "书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容书籍描述内容",
						account: "3.5万",
						cover: "https://img14.360buyimg.com/n1/s200x200_jfs/t1/46405/27/1163/86941/5cee532fEdc2cb605/26e281f3b8da0e68.jpg"
					}
				]
				// uni.request({
				//     url: 'https://uniapp-toutiao.herokuapp.com/api/profiles/home_news_list/' + `${this.newsid}/${this.page}/${this.size}`,
				//     success: (res => {
				//     	// console.log(res.data);
				//     	this.newsList = res.data.data;
				//     	// this.$refs.pdr && this.$refs.pdr.endPulldownRefresh();
				//     })
				// });
			},
			onTabTap(index) {
				// console.log(index);
				this.tabIndex = index;
			},
			onSwiperChange(e) {
				// console.log(e);
				this.tabIndex = e.target.current || e.detail.current;
				this.toview = this.tabList[this.tabIndex].id;
			},
			loadMoreData() {
				// 更改状态
				this.tabList[this.tabIndex].loadMoreStatus = 1;
				// 更改加载页数
				this.page++;
				// 数据请求
				// uni.request({
				//     url: 'https://uniapp-toutiao.herokuapp.com/api/profiles/home_news_list/' + `${this.newsid}/${this.page}/${this.size}`,
				//     success: (res) => {
				// 		res = res.data;
				//         if (res.data.length > 0) {
				//         	res.data.forEach(news => {
				//         		this.newsList.push(news);
				//         	})
				//         	this.tabList[this.tabIndex].loadMoreStatus = 0;
				//         } else {
				//         	// 返回数据为空 更改状态 没有更多数据
				//         	this.tabList[this.tabIndex].loadMoreStatus = 2;
				//         	return false;
				//         }
				//     }
				// });
				if(this.newsList.length <= 15) {
					this.newsList = this.newsList.concat(this.newsList);
					this.tabList[this.tabIndex].loadMoreStatus = 0;
				}else {
					this.tabList[this.tabIndex].loadMoreStatus = 2;
				}
			},
			handleCellTap(article_url){
				if(this.navigateFlag){
					return;
				}
				
				this.navigateFlag = true;
				
				console.log("url:`./article?url=${article_url}`");
				
				// uni.navigateTo({
				// 	url:`./article?url=${article_url}`
				// })
				
				setTimeout(() => {
					this.navigateFlag = false;
				},200)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		font-size: 36upx;
		font-family: 'STHeiti', 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
		overflow: hidden;
	}
  // 分类样式
  .tab-bar {
  	// background-color: #f4f5f6;
  	white-space: nowrap;
  	/* position: fixed; */
  	z-index: 99;
  	/* top: 300rpx; */

  
  	.uni-tab {
		height: 80rpx;
  		display: inline-block;
  		white-space: nowrap;
  		padding: 10rpx 16rpx 10rpx 16rpx;
  
  		.uni-tab-item {
  			padding: 0 16rpx;
			font-size: 28rpx;
  			height: 52rpx;
  			line-height: 52rpx;
  			color: #666666;
  		}
  
  		.tab-cur {
			margin-top: 20rpx;
  			color: #007AFF;
			font-weight: 600;
			border-bottom: 4rpx solid rgba(0, 122, 255, 1);
			padding-bottom: 20rpx;
  		}
  	
		// .tab-cur::after {
		// 	border-bottom: 4rpx solid rgba(0, 122, 255, 1);
		// 	// margin-top: 5rpx;
		// }
	}
  }
  
  .tab-bar ::-webkit-scrollbar {
  	width: 0 !important;
  	display: none;
  	height: 0 !important;
  	-webkit-appearance: none;
  	background: transparent;
  }
  
  
  // 内容样式
  .tab-box {
  	flex: 1;
  
  	.swiper-item {
  		display: flex;
  		flex: 1;
  		flex-direction: column;
  		overflow: hidden;
  
  		.panel-scroll-box {
  			height: 100%;
  		}
  	}
  }
</style>
